import React, {memo, useEffect, useState} from 'react';
import FollowWithInterestStyle from "./FollowWithInterestStyle";
import SingCoverItem from "../../../../components/part/singCoverItem/SingCoverItem";
import {ConfigProvider, Pagination, PaginationProps} from "antd";
import UnitBox from "../../../../components/part/unitBox/UnitBox";
import {UserVO} from "../../../../interface/UserInterface";
import {getFollowSingerByUserIdApi} from "../../../../services/followSinger";

type Props = {};
type SingCoverType={
  singName:string,
  singCover:string,

};
export default memo(function FollowWithInterest(props: Props) {
  const userId=parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
  //关于其他信息的变量,这里我们不再具体写了,具体字段请查看文档
  const [otherInfo,setOtherInfo]=useState<any>({});
  const [followList,setFollowList]=useState<UserVO[]>([]);
  useEffect(() => {
    getFollowSingerByUserIdApi({pageNum:1,pageSize:10,userId}).then((result:any)=>{
      console.log(result);
      setFollowList(result.data.data.data);
      setOtherInfo(result.data.data);
    },(error)=>{
      console.log(error);
    });
  }, []);
  return (
    <FollowWithInterestStyle>
      <UnitBox key="gdtj"
               title={"我的关注"}
               isShowLine={true}
      >
       <>
         <div className="follow-content">
           {
             followList.map((item:UserVO,index)=>{
               return(<SingCoverItem
                 key={index}
                 singCover={item.cover}
                 singName={item.nickname}
                 isAmplify={true}
                 isRadius={true}
                 singId={item.userId}
                 size={156}
               />)
             })
           }
         </div>

         {/* 使用antd分页器 */}
         <div className="follow-bottom-box">
           <Pagination defaultCurrent={otherInfo.pageNum}
                       defaultPageSize={otherInfo.pageSize}
                       total={otherInfo.total} hideOnSinglePage={true}/>
         </div>
       </>
      </UnitBox>
    </FollowWithInterestStyle>
  );
});
